<template>
  <div class="indexbox">
    <div class="header">
      <div class="adress" @click="goPositon">
        <span>郑州</span>
        <van-icon name="arrow-down" class="arr" />
      </div>
      <div class="movie">
        <button class="moviebtn">正在热映</button>
        <button class="moviebtn" @click="goNow">即将上映</button>
      </div>
      <div class="serch" @click="goSearch">
        <van-icon size="13" color="#7A7A7A" name="search" />
      </div>
    </div>
    <div class="content">
      <ul>
        <li class="movies" v-for="item in list" :key="item.id">
          <div class="left" >
            <img :src="item.small" alt="加载失败" class="image" />
            <div class="btn">
              <img :src="btn" @click="moviedetail(item.mId)" />
            </div>
          </div>
          <div class="right">
            <div class="detail">
              <div>{{ item.title }}</div>
              <div>
                萤火虫评分 <i>{{ item.rating_average }}</i>
              </div>
              <div>导演:{{ item.director }}</div>
              <div>主演：{{ item.scriptwriter }}</div>
            </div>
            <div class="ticket" @click="goBuy">购票</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import image from '@/assets/images/movie/poster.png'
import btn from '@/assets/images/movie/btn.png'
export default {
  data() {
    return {
      image,
      btn,
      list: [],
    }
  },
  computed: {},
  created() {
    axios
      .get(`http://bufantec.com/api/douban/movie/in_theaters`)
      .then((res) => {
        //    console.log(res.data.data.list);
        this.list = res.data.data.list
        console.log(this.list)
      })
  },
  mounted() {},
  methods: {
    moviedetail(a) {
      console.log(a)
      this.$router.push({ name: 'moviedetail', params: { id: a } })
    },
    goPositon() {
      this.$router.push({ name: 'position' })
    },
    goSearch() {
      this.$router.push({ name: 'search' })
    },
    goBuy() {
      this.$router.push({ path: 'cinema/detail' })
    },
    goNow() {
      this.$router.push({ name: 'now' })
    },

  },
}
</script>

<style scoped lang="scss">
.indexbox {
  background: #23262d;
  color: #fff;
  height: calc(100vh - 170px);
  overflow: auto;
  width: 100%;
}
.header {
  padding: 0 40px;
  height: 88px;
  background-color: #33363d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  .adress {
    opacity: 0.78;
    font-size: 28px;
    .arr {
      vertical-align: middle;
    }
  }
  .movie {
    width: 328px;
    height: 50px;
    .moviebtn {
      border-radius: 12px 10px 10px 12px;
      font-size: 28px;
      border: 1px solid #ee6723;
      color: #969393;
      background-color: transparent;
    }
    .moviebtn:hover,
    .moviebtn:nth-child(1) {
      background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
      color: #fff;
    }
  }
}
.content {
  margin: 0 40px;
  .movies {
    margin-top: 48px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    height: 292px;
    background-color: #33363d;
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    .left {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 210px;
      height: 312px;
      //   background-color: red;
      box-sizing: border-box;
      .image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 210px;
        height: 312px;
      }
      .btn {
        position: absolute;
        left: 67px;
        top: 118px;
        img {
          width: 76px;
          height: 76px;
        }
      }
    }
    .right {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 460px;
      display: flex;
      justify-content: flex-start;
      .detail {
        width: 269px;
        margin-left: 20px;
        margin-top: 24px;
        div:nth-child(1) {
          font-size: 32px;
          line-height: 45px;
          padding-bottom: 3px;
        }
        div:nth-child(2) {
          display: inline;
          font-size: 28px;
          line-height: 40px;
          padding-bottom: 12px;
          i {
            display: inline;
            color: #fbc34a;
          }
        }
        div:nth-child(3),
        div:nth-child(4) {
          opacity: 0.47;
          font-size: 24px;
          line-height: 33px;
          margin-bottom: 5px;
        }
      }
      .ticket {
        position: absolute;
        top: 132px;
        right: 28px;
        margin-left: 49px;
        background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
        box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
        border-radius: 12px;
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>
